<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/resource/common/layui/css/layui.css">
    <link rel="stylesheet" href="/resource/js/front/index.css">
</head>
<style>
</style>
<body>
<div th:replace="front/head :: heads"></div>
<div class="layui-container userpublic house-usercol">
    <div class="layui-row layui-col-space20">
        <p class="layui-hide-xs title">首页 &gt; <span> </span></p>
        <div th:replace="front/head :: info-nav"></div>
        <div class="layui-col-sm10">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">我的收藏</li>
                </ul>
                <div class="layui-tab-content layui-row layui-col-space30">
                    <div class="layui-col-xs3" th:each="collect:${collectPage.records}">
                        <div class="goods">
                            <img th:src="${collect.productImg}" style="height: 201px">
                            <a th:href="${'/front/productDetails.do?id='+collect.productId}">
                                <p th:text="${collect.productName}">陶瓷面不粘锅</p>
                                <p class="price" th:text="${'￥'+collect.productPrice}">200</p>
                            </a>
                            <span class="del" th:id="${collect.id}">&times;</span>
                        </div>
                    </div>
                </div>
                <div id="test1"></div>
            </div>
        </div>
    </div>
</div>

<!-- layui.js -->
<script type="text/javascript" src="/resource/common/layui/layui.js"></script>
<script type="text/javascript" src="/resource/js/front/house.js"></script>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<![endif]-->
<script th:inline="javascript">
    layui.use(['table', 'layer', 'laypage', 'form'], function () {
        var table = layui.table,
            $ = layui.$,
            layer = layui.layer,
            laypage = layui.laypage,
            form = layui.form;
        //执行一个laypage实例
        //后台数据拿到的数据总数
        var count = [[${collectPage.total}]]
        //后台数据拿到的页数
        var page = [[${page}]]
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: count //数据总数，从服务端得到
            , limit: "12"//默认条数,必须和后台保持一直
            , curr: page
            , jump: function (obj, first) {
                //首次不执行
                if (!first) {
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数
                    location.href = '/front/collect.do?page=' + obj.curr + '&limit=' + obj.limit
                }
            }
        });
    });
</script>

</body>
</html>